import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  LogoutOutlined,
} from '@ant-design/icons'
import {
  Button, Menu, Popconfirm, Avatar, Image
} from 'antd'
import React, { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'
import './myIndex.scss'
import { useStore } from '../store'
import { useEffect } from 'react'
import { observer } from 'mobx-react-lite'

import InforComponent from '../component/inforComponent'

function getItem (label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  }
}
const items = [
  getItem(<Link to={'/'}>首页</Link >, 'menu1', <PieChartOutlined />),
  getItem(<Link to={'/myIndex'}>控制台</Link>, 'menu2', <DesktopOutlined />),

  getItem('考试管理', 'menuSub1', <MailOutlined />, [
    getItem(<Link to={'/myIndex/testAll'}>所有考试</Link>, 'menu5'),
    getItem(<Link to={'/myIndex/testAdd'}>添加考试</Link>, 'menu6'),

  ]),
  getItem('题库管理', 'menuSub2', <AppstoreOutlined />, [
    getItem(<Link to={'/myIndex/question'}>所有题目</Link>, 'menu9'),
    getItem('学科管理', 'menuSub3', null, [getItem(<Link to={'/myIndex/subject'}>所有学科</Link>, 'menu11'), getItem('我的班级', 'menu12')]),
  ]),
  getItem('学生管理', 'menuSub4', <AppstoreOutlined />, [
    getItem(<Link to={'/myIndex/course'}>所有班课</Link>, 'menu15'),
  ]),
]

function MyIndex () {

  //抽屉表单
  //
  const [collapsed, setCollapsed] = useState(false)
  const navigate = useNavigate()
  const { userInforStore, loginStore } = useStore()
  useEffect(() => {
    userInforStore.getUserInfor()

  }, [userInforStore])

  const toggleCollapsed = () => {
    setCollapsed(!collapsed)
  }

  const click = (e) => {
    // console.log(e.key)
  }

  //退出登录
  const onConfirm = () => {
    loginStore.loginOut()
    navigate('/login')
  }
  //

  //个人信息抽屉
  const [open, setOpen] = useState(false)
  const showLargeDrawer = () => {
    setOpen(true)
  }

  //
  return (
    <div className='container-my'>
      <div className='my-menu-sty'>
        <Button
          type="primary"
          onClick={toggleCollapsed}
          style={{
            marginBottom: 16,
          }}
        >
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="light"
          inlineCollapsed={collapsed}
          onClick={click}
          items={items}
        />
      </div>
      <div className='my-content-sty'>
        <div className='userInfor'>
          <div>
          </div>
          <div className='user-infor-right'>
            <Avatar
              src={
                <Image
                  preview={false}
                  onClick={showLargeDrawer}
                  src="https://joeschmoe.io/api/v1/random"
                  style={{
                    width: 32,
                  }}
                />
              }
            />
            <span className='userInfor-name'>{userInforStore.userInfor.real_name}</span>
            <span className='userInfor-name' >
              <Popconfirm
                onConfirm={onConfirm}
                title='是否确认退出' okText='退出' cancelText='取消'>
                <LogoutOutlined />退出
              </Popconfirm>
            </span>

            <InforComponent
              open={open}
              setOpen={setOpen}>

            </InforComponent>
          </div>

        </div >
        <div className='content-infor' >
          <Outlet></Outlet>
        </div>
      </div>
    </div>
  )
}


export default observer(MyIndex)